---
layout: default
title: JavaScript Game Engine, HTML5 Game Engine
---




<div class="row splash">
	
	<div id = "splash-right">
	{{#markdown}}
``` javascript
window.onload = function() {
	Crafty.init();
	// A blue block, controlled by arrow keys
	var player = Crafty.e("2D, Canvas, Color, Fourway")
		.attr({x:100, y:100, w:50, h:50})
		.color("blue")
		.fourway(3);
};
```
    {{/markdown}}
	</div>
	<div id="splash-left">
		<div id="splash-text">
			<div class="row" id="blurb">
				<!-- <div class="blurb-title">CraftyJS</div> -->
				<div class="col-md-12" class="title-text">A flexible framework <br/> for Javascript games</div>
				
			</div>
			

		</div>
		<div id="splash-download">
			<div class="download-link">
				<a href="#install" class="download" id="download">
					<div>Download Crafty</div>
					<div class="version">v. 0.8.0</div>
				</a>
				<div class="install-options">
					<a href="#direct-install">minified</a> &#8226; <a href="#bower-install">bower</a> &#8226; <a href="#npm-install">npm</a> &#8226; <a href="#nightly-install">nightly</a>

				</div>
			</div>
		</div>
	</div>
	
</div>



<div class="announcement">
	<div style="float:right; margin-right: 20px;">
		Show Crafty.js some <span id="love">love</span>: 
		<iframe src="http://ghbtns.com/github-btn.html?user=craftyjs&repo=crafty&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20" style="vertical-align: text-top;"></iframe>
	</div>
	<div><span class="date">12 February: </span><a href="https://github.com/craftyjs/Crafty/releases/tag/0.8.0">version 0.8.0</a> is out! </div>
</div>



<div id="grid">

	<div class="outer-box"><div class="box "><div class="inner-box">
		<h2>Open Source</h2>
	
		<p>Crafty is actively developed on <a href="https://github.com/craftyjs/Crafty">Github</a>, and we welcome contributions! See <a href="https://github.com/craftyjs/Crafty/releases/tag/0.8.0">release notes.</a></p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box browser">
		<h2>Cross Browser compatible</h2>
		<p>Your games will work on all modern browsers, including IE9.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box canvas">
		<h2>Canvas or DOM</h2>
		<p>Choose the technology to render your entities, it will look exactly the same.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>Small file size</h2>
		<p>Small enough that you don't need to wory about it delaying your game.</p>
	</div></div></div>

	<div class="outer-box"><div class="box "><div class="inner-box">
		<h2>Entity Component System</h2>
		<p>A better way to approach game development without long chains of inheritance.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box sprite">
		<h2>Sprite Map support</h2>
		<p>Splice and dice a sprite map to easily draw game entities.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box collide">
		<h2>Collision Detection</h2>
		<p>Advanced SAT collision detection with more information than just true or false.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>Fire &amp; Forget Events</h2>
		<p>Event system for custom events that can be triggered whenever, on whatever, and bound just as easily.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>Lots 'o Goodies</h2>
		<p>Heaps of native components for sound, animation, effects and input to make your game pop!</p>
	</div></div>
	<div class="clearer"></div></div>
</div>


<div id="install-div">
	<h2 id="install">Installation</h2>
	<div id="direct-install">
		<h3>Direct download</h3>

		<p>You can download a regular or minified version of Crafty:</p>
		<a class="bullet-point" href="https://github.com/craftyjs/Crafty/releases/download/0.8.0/crafty.js">crafty.js</a>
		<a class="bullet-point"href="https://github.com/craftyjs/Crafty/releases/download/0.8.0/crafty-min.js">crafty-min.js</a>
	</div>
	<div id="npm-install">
		<h3>npm module</h3>
		<p>Crafty is available as an <a href="https://www.npmjs.org">npm</a> module.</p>
		<code class="grey">$ npm install craftyjs</code>
		<p>You can see an example on how to get started:</p>
		<a class="bullet-point" href="https://github.com/kevinsimper/craftyjs-npm-example">npm example</a>
	</div>
	<div id="bower-install">
		<h3>Bower installation</h3>
		<p>With <a href="http://bower.io/">bower</a> installed, the command</p>
		<code class="grey">$ bower install crafty</code>
		<p>will fetch the lastest version of crafty and install it in your project's bower directory.</p>
	</div>
	<div id="nightly-install">
		<h3>Bleeding edge</h3>

		<p>Fresh builds are uploaded by Travis after every successful merge:</p>
		<a class="bullet-point" href="https://github.com/craftyjs/Crafty-Distro/tree/nightlies">Nightly distribution</a>
	</div>
</div>


<div id="demos-div">
	<h2 id="demos-title">Demos</h2>
	<ul id="demos" class="gridlist">
		<!-- external demos -->
		<li>
			<a href="http://hugeen.github.com/Defend-The-Den/">
				<img src="demos/thumbs/defendtheden.png"/>
				<span>Defend the Den</span>
			</a>
		</li>
		<li>
			<a href="http://blackscorp.github.com/cron/">
				<img src="demos/thumbs/cron.png"/>
				<span>Cron</span></a>
		</li>
		<li>
			<a href="http://morrisgames.info/">
				<img src="demos/thumbs/code-commander.png"/>
				<span>Code Commander</span></a>
		</li>
		<li>
			<a href="http://planktongames.com/wordy/">
				<img src="demos/thumbs/wordy.png"/>
				<span>Wordy</span></a>
		</li>
		<li>
			<a href="http://lapiroff.name/orderlies/Q/">
				<img src="demos/thumbs/Q.png"/>
				<span>Q</span></a>
		</li>
		<li>
			<a href="http://projects.edillingham.com/senet/">
				<img src="demos/thumbs/senet.png" />
				<span>Senet</span></a>
		</li>
		<li>
			<a href="https://twohundredscythes.itch.io/flower-son">
				<img src="demos/thumbs/flower-son.png" />
				<span>Flower Son</span></a>
		</li>
		<li>
			<a href="https://grimmsbattlefield.firebaseapp.com/">
				<img src="demos/thumbs/grimms-battlefield.png" />
				<span>Grimm's Battlefield</span></a>
		</li>
		<!-- local demos -->
		<li>
			<a href="demos/fruitassassin">
				<img src="demos/thumbs/fruit.png"/>
				<span>Fruit Assassin</span></a>
		</li>
		<li>
			<a href="demos/connect4">
				<img src="demos/thumbs/connect4.png"/>
				<span>Connect 4</span></a>
		</li>
		<li>
			<a href="demos/asteroids">
				<img src="demos/thumbs/asteroids.png"/>
				<span>Asteroids</span></a>
		</li>
		<li>
			<a href="demos/rpg">
				<img src="demos/thumbs/rpg.png"/>
				<span>RPG</span></a>
		</li>
		<li>
			<a href="demos/isometric">
				<img src="demos/thumbs/isometric.png"/>
				<span>Isometric</span></a>
		</li>
	</ul>
	<div class="clearer" />
</div>
<div class="clearer"></div>
<div id="contributors" class="half">
	<h2>Development team
	</h2>
	<p>Active team members:
		<ul>
			<li><a href="https://github.com/starwed">starwed</a> (maintainer)</li>
			<li><a href="https://github.com/kevinsimper">Kevin Simper</a></li>
			<li><a href="https://github.com/mucaho">mucaho</a></li>
		</ul>
	</p>
	<p>Original author: Louis Stowasser</p>
	
</div>

<div class="clearer"></div>
</div>
